<!DOCTYPE html>
<html>
<head>
    <title>FLV.js 多屏播放测试</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .video-container {
            width: 480px;
            margin: 10px;
            position: relative;
        }
        .video-container video {
            width: 100%;
            height: 270px;
            background: #000;
        }
        .status {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="container" id="videoContainer">
        <!-- 动态生成视频容器 -->
    </div>

    <script src="./flv.min.js"></script> <!-- 根据实际构建路径调整 -->
    <script>
        // 流地址列表（请替换为实际可用的FLV流地址）
        const streams = [
            'ws://192.168.22.178:8081/live/proxy_1.flv?src=rtsp://admin:wellav123@192.168.22.63:554/h264/ch1/main/av_stream',
			'ws://192.168.22.178:8081/live/proxy_2.flv?src=rtsp://admin:wellav123@192.168.22.64:554/h264/ch1/main/av_stream',
			'http://192.168.22.178:8081/live/proxy_1.flv?src=rtsp://admin:wellav123@192.168.22.63:554/h264/ch1/main/av_stream',
			'http://192.168.22.178:8081/live/proxy_2.flv?src=rtsp://admin:wellav123@192.168.22.64:554/h264/ch1/main/av_stream',
        ];
        const container = document.getElementById('videoContainer');
        streams.forEach((_, index) => {
            const containerDiv = document.createElement('div');
            containerDiv.className = 'video-container';
            containerDiv.innerHTML = `
                <div class="status" id="status${index + 1}">准备中...</div>
                <video id="video${index + 1}" controls muted></video>
            `;
            container.appendChild(containerDiv);
        });

        // 创建多个播放器实例
        streams.forEach((url, index) => {
            const videoId = `video${index + 1}`;
            const statusId = `status${index + 1}`;
            
            if (flvjs.isSupported()) {
                const videoElement = document.getElementById(videoId);
                const statusElement = document.getElementById(statusId);
                
                const flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    url: url,
                    isLive: true,
                    hasAudio: false,
                    enableStashBuffer: true
                });

                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load();
                
                flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
                    statusElement.textContent = `错误: ${errType} - ${errDetail}`;
                });
                
                flvPlayer.on(flvjs.Events.MEDIA_INFO, () => {
                    statusElement.textContent = '播放中...';
                    videoElement.play().catch(() => {
                        statusElement.textContent = '需要用户交互后点击播放';
                    });
                });
            }
        });
    </script>
</body>
</html>